<template>
    <div>
        <a-modal
         v-model:visible="keyProcessesVisible" 
         :title="formData.modalTitle"
         width="70%"
        >
            <div style="display: flex;">
                <div>
                    <span style="background: #DBF5F5;display: inline-block;padding: 5px;margin-bottom: 5px;">关键设备：</span>
                    <div class="variety-left">
                        <span class="variety-border-top"></span>
                        <div class="variety-information-text-v">
                            <div>
                                <div>安瓿水浴灭菌柜</div>
                                <div>ZJ-01-018</div>
                            </div>
                            <a-button style="margin: 0 20px;" class="blue-btn" @click="viewClick('安瓿水浴灭菌柜')" type="primary">查看</a-button>
                        </div>
                        <div class="variety-information-text-v">
                            <div>
                                <div>安瓿自动灯检机</div>
                                <div>ZJ-01-019</div>
                            </div>
                            <a-button style="margin: 0 20px;" class="blue-btn" @click="viewClick('安瓿自动灯检机')" type="primary">查看</a-button>
                        </div>
                        <span class="variety-border-bottom"></span>
                    </div>
                </div>
                <div style="flex: 1;">
                    <span style="background: #DBF5F5;display: inline-block;padding: 5px;margin-bottom: 5px;">过程记录：</span>
                    <a-textarea 
                        class="opinion-gc-v"
                        disabled
                        v-model:value="formData.opinion"
                        :autosize="{ minRows: 3, maxRows: 10000 }"
                    ></a-textarea>
                </div>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="handleCancel" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="false" @click="handleOk" type='primary'>确定</a-button>
                </div>
            </template>
        </a-modal>
        <batchDetails ref="batchDetailsRef" />
    </div>
</template>
<script>
export default {
    components:{
    },
    props:{

    },
    data(){
        return{
            formData:{
                opinion:'瓶子置理瓶台上，剔除不合格瓶。\n瓶子进入外洗机，用毛刷、饮用水刷洗外壁。\n已外洗的瓶子经传送带传送至超声波洗瓶机，用强度为3.5Kw 的两台超声波发生器进行洗涤。\n求饮用水水温45~50C。\n在超声波清洗后，再用饮用水内冲 2 次、外冲 2 次。\n瓶子进入精洗部分，用经 0.22m 滤过的纯化水内冲 2次、外冲2次。\n用经 0.22m 滤过的注射用水内冲2 次、外冲1次。\n洗瓶用纯化水、注射用水的压力应大于 0.2MPa。\n精洗后的瓶子应在 2 小时以内伸用。'
            },
            keyProcessesVisible:false,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.formData = {...val,...this.formData}
        },
        viewClick(name){
            this.$message.warning('开发中，敬请期待！')
        },
        handleCancel(){
            this.keyProcessesVisible = false
        },
        handleOk(){
            this.keyProcessesVisible = false
        },
    }
}
</script>
<style lang="less">
.variety-left{
    padding: 30px 10px 30px 10px;
    border-left: 2px solid #212930;
    position: relative;
    .variety-border-top{
        display: inline-block;
        width: 26px;
        height: 2px;
        border-top:2px solid #212930 ;
        position: absolute;
        top: 0;
        left: 0;
    }
    .variety-border-bottom{
        display: inline-block;
        width: 26px;
        height: 2px;
        border-bottom:2px solid #212930 ;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .variety-information-text-v{
        margin-bottom: 42px;
        color: #323232;
        display: flex;
        align-items: center;
    }
}
.opinion-gc-v{
    background: #fff !important;
    color: #323232 !important;
}
</style>